<template>
	<view class="project">
		<!-- 多级菜单 -->
		<view class="menu-container">
			<!-- 一级菜单 -->
			<scroll-view class="menu-tabs" scroll-x="true" show-scrollbar="false">
				<view class="menu-list">
					<view 
						class="menu-item" 
						v-for="(menu, index) in firstLevelMenus" 
						:key="index"
						:class="{ active: currentFirstIndex === index }"
						@tap="switchFirstMenu(index)"
					>
						{{ menu.categoryName }}
					</view>
				</view>
			</scroll-view>
			<!-- 一级菜单右侧导航箭头 -->
			<view class="menu-arrow first-level" @tap="scrollMenu('first')">
				<text>›</text>
			</view>
			
			<!-- 二级菜单 -->
			<scroll-view v-if="secondLevelMenus.length" class="menu-tabs second-level" scroll-x="true" show-scrollbar="false">
				<view class="menu-list">
					<view 
						class="menu-item" 
						v-for="(menu, index) in secondLevelMenus" 
						:key="index"
						:class="{ active: currentSecondIndex === index }"
						@tap="switchSecondMenu(index)"
					>
						{{ menu.categoryName }}
					</view>
				</view>
			</scroll-view>
			<!-- 二级菜单右侧导航箭头 -->
			<view class="menu-arrow second-level" v-if="secondLevelMenus.length" @tap="scrollMenu('second')">
				<text>›</text>
			</view>
			
			<!-- 三级菜单 已隐藏 -->
			<template v-if="false"></template>
			
			<!-- 四级菜单 -->
			<scroll-view v-if="false" class="menu-tabs fourth-level" scroll-x="true" show-scrollbar="false">
				<view class="menu-list">
					<view 
						class="menu-item" 
						v-for="(menu, index) in fourthLevelMenus" 
						:key="index"
						:class="{ active: currentFourthIndex === index }"
						@tap="switchFourthMenu(index)"
					>
						{{ menu.categoryName }}
					</view>
				</view>
			</scroll-view>
			<!-- 四级菜单右侧导航箭头 -->
			<view class="menu-arrow fourth-level" v-if="false" @tap="scrollMenu('fourth')">
				<text>›</text>
			</view>
		</view>
		
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" @tap="toggleFilter('price')">
				<text>价格</text>
				<text class="arrow" :class="{ up: showPriceFilter }">▼</text>
			</view>
			<view class="filter-item" @tap="toggleFilter('duration')">
				<text>时长</text>
				<text class="arrow" :class="{ up: showDurationFilter }">▼</text>
			</view>
		</view>
		
		<!-- 筛选面板 -->
		<view class="filter-panel" v-if="showPriceFilter || showDurationFilter">
			<!-- 价格筛选 -->
			<view class="filter-options" v-if="showPriceFilter">
				<view 
					class="option-item"
					v-for="(price, index) in priceRanges"
					:key="'price' + index"
					:class="{ active: selectedPrice === index }"
					@tap="selectPrice(index)"
				>
					{{ price.text }}
				</view>
			</view>
			
			<!-- 时长筛选 -->
			<view class="filter-options" v-if="showDurationFilter">
				<view 
					class="option-item"
					v-for="(duration, index) in durations"
					:key="'duration' + index"
					:class="{ active: selectedDuration === index }"
					@tap="selectDuration(index)"
				>
					{{ duration.text }}
				</view>
			</view>
		</view>
		
		<!-- 项目列表 -->
		<scroll-view class="project-list" scroll-y="true">
			<view class="project-items">
				<view 
					class="project-item"
					v-for="(project, index) in currentProjects"
					:key="index"
					@tap="selectProject(project)"
				>
					<image class="project-image" :src="project.image" mode="aspectFit"></image>
					<view class="project-info">
						<text class="project-name">{{ project.name }}</text>
						<text class="project-desc">{{ project.desc }}</text>
						<view class="project-meta">
							<view class="project-price">
								<text class="symbol">¥</text>
								<text class="number">{{ project.price }}</text>
								<text class="unit">起</text>
							</view>
							<view class="project-duration">
								<text class="icon">⏱</text>
								<text>{{ project.duration }}分钟</text>
							</view>
						</view>
					</view>
					<view class="book-btn">立即预约</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 菜单相关
			categoryList: [], // 所有分类数据
			currentFirstIndex: 0,
			currentSecondIndex: 0,
			currentThirdIndex: 0,
			currentFourthIndex: 0,
			
			// 项目列表
			projectList: [], // 添加项目列表数据
			
			// 筛选相关
			showPriceFilter: false,
			showDurationFilter: false,
			selectedPrice: -1,
			selectedDuration: -1,
			
			// 价格区间
			priceRanges: [
				{ text: '100元以下', min: 0, max: 100 },
				{ text: '100-200元', min: 100, max: 200 },
				{ text: '200-300元', min: 200, max: 300 },
				{ text: '300元以上', min: 300, max: Infinity }
			],
			
			// 项目时长
			durations: [
				{ text: '10分钟', value: 10 },
				{ text: '30分钟', value: 30 },
				{ text: '60分钟', value: 60 }
			]
		}
	},
	
	computed: {
		// 一级菜单列表
		firstLevelMenus() {
			return this.categoryList.filter(item => item.level === 1 && item.status === 1)
				.sort((a, b) => a.sortOrder - b.sortOrder)
		},
		
		// 二级菜单列表
		secondLevelMenus() {
			if (!this.firstLevelMenus.length) return []
			const currentFirst = this.firstLevelMenus[this.currentFirstIndex]
			return this.categoryList.filter(item => 
				item.level === 2 && 
				item.parentId === currentFirst.id && 
				item.status === 1
			).sort((a, b) => a.sortOrder - b.sortOrder)
		},
		
		// 三级菜单列表
		thirdLevelMenus() {
			if (!this.secondLevelMenus.length || this.currentSecondIndex < 0) return []
			const currentSecond = this.secondLevelMenus[this.currentSecondIndex]
			if (!currentSecond) return []
			
			return this.categoryList.filter(item => 
				item.level === 3 && 
				item.parentId === currentSecond.id && 
				item.status === 1
			).sort((a, b) => a.sortOrder - b.sortOrder)
		},
		
		// 四级菜单列表
		fourthLevelMenus() {
			if (!this.thirdLevelMenus.length || this.currentThirdIndex < 0) return []
			const currentThird = this.thirdLevelMenus[this.currentThirdIndex]
			if (!currentThird) return []
			return this.categoryList.filter(item =>
				item.level === 4 &&
				item.parentId === currentThird.id &&
				item.status === 1
			).sort((a,b)=>a.sortOrder-b.sortOrder)
		},
		
		// 当前选中的分类ID
		currentCategoryId() {
			if (!this.firstLevelMenus.length) return null
			let selId = null;
			
			// 三级菜单已隐藏，直接取二级
			// 如果选择了二级菜单
			if (this.secondLevelMenus.length &&
					 this.currentSecondIndex >= 0 &&
					 this.secondLevelMenus[this.currentSecondIndex]) {
				selId = this.secondLevelMenus[this.currentSecondIndex].id;
			}
			// 如果只选择了一级菜单
			else if (this.firstLevelMenus[this.currentFirstIndex]) {
				selId = this.firstLevelMenus[this.currentFirstIndex].id;
			}
			return selId;
		},
		
		currentProjects() {
			if (!this.projectList || !this.projectList.length) return []
			
			let projects = this.projectList
			
			// 价格筛选
			if (this.selectedPrice !== -1) {
				const range = this.priceRanges[this.selectedPrice]
				projects = projects.filter(project => {
					const price = Number(project.price)
					return price >= range.min && price < range.max
				})
			}
			
			// 时长筛选
			if (this.selectedDuration !== -1) {
				const duration = this.durations[this.selectedDuration].value
				projects = projects.filter(project => project.duration === duration)
			}
			
			return projects
		}
	},
	
	onLoad() {
		this.loadCategories()
		this.checkUserRealName()
		},
		onShow() {
			this.checkUserRealName()
		},
	
	methods: {
		// Check if user has set their real name
		checkUserRealName() {
				// Get userInfo from localStorage
				const userInfoStr = uni.getStorageSync('userInfo')
				if (userInfoStr) {
					try {
						let userInfo
						// Parse userInfo if it's a string
						if (typeof userInfoStr === 'string') {
							const parsed = JSON.parse(userInfoStr)
							// Check if it's login response format
							if (parsed.code === 200 && parsed.data) {
								userInfo = parsed.data
							} else {
								userInfo = parsed
							}
						} else {
							userInfo = userInfoStr
						}
						
						// Check if realName is empty
						if (!userInfo.realName||userInfo.realName=='') {
							// Show modal asking user to set real name
							uni.showModal({
								title: '提示',
								content: '请先在个人信息中填写真实姓名',
								confirmText: '去填写',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										// Navigate to my-info page
										uni.navigateTo({
											url: '/pages/my-info/my-info'
										})
									}
								}
							})
						}
					} catch (e) {
						console.error('解析用户信息失败', e)
					}
				}
			},
		// 加载分类数据
		async loadCategories() {
			try {
				const res = await uni.request({
					url: `${uni.$config.baseUrl}/category/category/listAll`,
					method: 'GET'
				})
				console.log(res)
				if (res.data.code === 200) {
					this.categoryList = res.data.rows
					console.log()
					// 自动选择一级菜单的第一个选项
					if (this.firstLevelMenus.length > 0) {
						this.currentFirstIndex = 0
						// 若该一级下存在二级菜单，默认选中第一个二级菜单
						if (this.secondLevelMenus.length > 0) {
							this.currentSecondIndex = 0
						} else {
							this.currentSecondIndex = -1
						}
						// 如果二级菜单下有三级菜单，同理处理
						if (this.thirdLevelMenus.length > 0) {
							this.currentThirdIndex = 0
						} else {
							this.currentThirdIndex = -1
						}
					}
					this.loadProjects()
				} else {
					uni.showToast({
						title: '获取分类列表失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取分类列表失败:', error)
				uni.showToast({
					title: '获取分类列表失败',
					icon: 'none'
				})
			}
		},
		
		// 加载项目列表
		async loadProjects() {
			try {
				const res = await uni.request({
					url: `${uni.$config.baseUrl}/project/project/groupByType/${this.currentCategoryId || ''}`,
					method: 'GET'
				})
				
				if (res.statusCode === 200 && res.data.code === 200) {
					// 直接使用返回的 projects 数组
					this.projectList = res.data.data.projects || []
				} else {
					uni.showToast({
						title: '获取项目列表失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取项目列表失败:', error)
				uni.showToast({
					title: '获取项目列表失败',
					icon: 'none'
				})
			}
		},
		
		// 切换一级菜单
		switchFirstMenu(index) {
			this.currentFirstIndex = index
			// 根据新的一级菜单刷新 secondLevelMenus，再决定默认索引
			if (this.secondLevelMenus.length > 0) {
				this.currentSecondIndex = 0
			} else {
				this.currentSecondIndex = -1
			}
			this.currentThirdIndex = -1
			this.currentFourthIndex = -1
			this.loadProjects()
		},
		
		// 切换二级菜单
		switchSecondMenu(index) {
			this.currentSecondIndex = index
			this.currentThirdIndex = 0
			this.currentFourthIndex = 0
			// 如果二级菜单下有三级菜单，不自动选择三级菜单
			if (this.thirdLevelMenus.length > 0) {
				this.currentThirdIndex = -1
			}
			this.loadProjects()
		},
		
		// 切换三级菜单
		switchThirdMenu(index) {
			this.currentThirdIndex = index
			this.currentFourthIndex = 0
			if (this.fourthLevelMenus.length>0) {
				this.currentFourthIndex = -1
			}
			this.loadProjects()
		},
		
		// 切换四级菜单
		switchFourthMenu(index) {
			this.currentFourthIndex = index
			this.loadProjects()
		},
		
		// 选择项目
		selectProject(project) {
			uni.navigateTo({
				url: `/pages/service-detail/service-detail?id=${project.id}`
			})
		},
		
		// 切换筛选面板
		toggleFilter(type) {
			if (type === 'price') {
				this.showPriceFilter = !this.showPriceFilter
				this.showDurationFilter = false
			} else {
				this.showDurationFilter = !this.showDurationFilter
				this.showPriceFilter = false
			}
		},
		
		// 选择价格区间
		selectPrice(index) {
			this.selectedPrice = this.selectedPrice === index ? -1 : index
			this.showPriceFilter = false
		},
		
		// 选择时长
		selectDuration(index) {
			this.selectedDuration = this.selectedDuration === index ? -1 : index
			this.showDurationFilter = false
		},
		
		// 滚动菜单
		scrollMenu(level) {
			if (level === 'first') {
				// 计算下一个菜单项的位置
				const nextIndex = (this.currentFirstIndex + 1) % this.firstLevelMenus.length
				const menuItemWidth = 150 // 估计每个菜单项的宽度
				const scrollLeft = nextIndex * menuItemWidth
				
				// 更新当前选中的菜单项
				this.currentFirstIndex = nextIndex
				this.currentSecondIndex = 0
				this.currentThirdIndex = 0
				this.currentFourthIndex = 0
				this.loadProjects()
				
				// 滚动到下一个菜单项
				const query = uni.createSelectorQuery().in(this)
				query.select('.menu-tabs').boundingClientRect(data => {
					if (data) {
						uni.createSelectorQuery()
							.select('.menu-tabs')
							.fields({
								node: true,
								size: true
							})
							.exec(res => {
								if (res[0] && res[0].node) {
									const scrollView = res[0].node
									scrollView.scrollTo({
										left: scrollLeft,
										behavior: 'smooth'
									})
								}
							})
					}
				}).exec()
			} else if (level === 'second') {
				// 计算下一个菜单项的位置
				const nextIndex = (this.currentSecondIndex + 1) % this.secondLevelMenus.length
				const menuItemWidth = 150 // 估计每个菜单项的宽度
				const scrollLeft = nextIndex * menuItemWidth
				
				// 更新当前选中的菜单项
				this.currentSecondIndex = nextIndex
				this.currentThirdIndex = 0
				this.currentFourthIndex = 0
				this.loadProjects()
				
				// 滚动到下一个菜单项
				const query = uni.createSelectorQuery().in(this)
				query.select('.menu-tabs.second-level').boundingClientRect(data => {
					if (data) {
						uni.createSelectorQuery()
							.select('.menu-tabs.second-level')
							.fields({
								node: true,
								size: true
							})
							.exec(res => {
								if (res[0] && res[0].node) {
									const scrollView = res[0].node
									scrollView.scrollTo({
										left: scrollLeft,
										behavior: 'smooth'
									})
								}
							})
					}
				}).exec()
			} else if (level === 'third') {
				// 计算下一个菜单项的位置
				const nextIndex = (this.currentThirdIndex + 1) % this.thirdLevelMenus.length
				const menuItemWidth = 150 // 估计每个菜单项的宽度
				const scrollLeft = nextIndex * menuItemWidth
				
				// 更新当前选中的菜单项
				this.currentThirdIndex = nextIndex
				this.currentFourthIndex = 0
				this.loadProjects()
				
				// 滚动到下一个菜单项
				const query = uni.createSelectorQuery().in(this)
				query.select('.menu-tabs.third-level').boundingClientRect(data => {
					if (data) {
						uni.createSelectorQuery()
							.select('.menu-tabs.third-level')
							.fields({
								node: true,
								size: true
							})
							.exec(res => {
								if (res[0] && res[0].node) {
									const scrollView = res[0].node
									scrollView.scrollTo({
										left: scrollLeft,
										behavior: 'smooth'
									})
								}
							})
					}
				}).exec()
			} else if (level === 'fourth') {
				// 暂简单置空；可按需实现
			}
		}
	}
}
</script>

<style lang="scss">
.project {
	min-height: 100vh;
	background: #F8F8F8;
	
	.menu-container {
		background: #FFFFFF;
		position: sticky;
		top: 0;
		z-index: 10;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.menu-tabs {
			padding: 24rpx 0;
			
			&.second-level {
				background: #F8F8F8;
				padding: 16rpx 0;
				
				.menu-item {
					font-size: 30rpx;
					padding: 16rpx 34rpx;
					
					&.active {
						color: #2B87FF;
						font-weight: 600;
						
						&::after {
							width: 36rpx;
							height: 6rpx;
						}
					}
				}
			}
			
			&.third-level {
				background: #F5F5F5;
				padding: 14rpx 0;
				
				.menu-item {
					font-size: 28rpx;
					padding: 14rpx 34rpx;
					
					&.active {
						color: #2B87FF;
						font-weight: 600;
						
						&::after {
							width: 28rpx;
							height: 5rpx;
						}
					}
				}
			}
			
			.menu-list {
				display: flex;
				padding: 0 30rpx;
				
				.menu-item {
					padding: 18rpx 36rpx;
					font-size: 32rpx;
					color: #444;
					position: relative;
					white-space: nowrap;
					transition: all 0.3s;
					
					&.active {
						color: #2B87FF;
						font-weight: 600;
						
						&::after {
							content: '';
							position: absolute;
							left: 50%;
							bottom: -4rpx;
							transform: translateX(-50%);
							width: 48rpx;
							height: 6rpx;
							background: #2B87FF;
							border-radius: 3rpx;
						}
					}
					
					&:active {
						opacity: 0.7;
					}
				}
			}
		}
		
		.menu-arrow {
			position: fixed;
			right: 0;
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95));
			z-index: 100;
			box-shadow: -4rpx 0 10rpx rgba(0, 0, 0, 0.05);
			border-radius: 40rpx 0 0 40rpx;
			
			text {
				font-size: 48rpx;
				color: #2B87FF;
				font-weight: bold;
				text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
				line-height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transform: translateY(-2rpx);
				padding-left: 8rpx;
			}
			
			&.first-level {
				top: 22rpx;
			}
			
			&.second-level {
				top: 135rpx;
			}
			
			&.third-level {
				top: 235rpx;
			}
			
			&:active {
				background: linear-gradient(90deg, rgba(255,255,255,0), rgba(43, 135, 255, 0.1));
				
				text {
					transform: scale(0.9) translateY(-2rpx);
				}
			}
		}
	}
	
	.filter-bar {
		display: flex;
		background: #FFFFFF;
		padding: 24rpx 36rpx;
		border-bottom: 1rpx solid #EEEEEE;
		margin-bottom: 2rpx;
		
		.filter-item {
			margin-right: 50rpx;
			font-size: 32rpx;
			color: #444;
			display: flex;
			align-items: center;
			padding: 8rpx 0;
			
			.arrow {
				font-size: 28rpx;
				margin-left: 10rpx;
				transition: all 0.3s;
				
				&.up {
					transform: rotate(180deg);
				}
			}
			
			&:active {
				opacity: 0.7;
			}
		}
	}
	
	.filter-panel {
		background: #FFFFFF;
		padding: 26rpx 36rpx;
		border-bottom: 1rpx solid #EEEEEE;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		animation: slideDown 0.3s ease;
		
		.filter-options {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -12rpx;
			
			.option-item {
				width: calc(50% - 24rpx);
				margin: 12rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #F8F8F8;
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #444;
				transition: all 0.3s;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				
				&.active {
					background: rgba(43, 135, 255, 0.1);
					color: #2B87FF;
					font-weight: 600;
					box-shadow: 0 4rpx 12rpx rgba(43, 135, 255, 0.2);
				}
				
				&:active {
					opacity: 0.8;
					transform: scale(0.98);
				}
			}
		}
	}
	
	.project-list {
		padding: 24rpx 12rpx;
		
		.project-items {
			padding-right: 24rpx;
			
			.project-item {
				margin: 0 0 30rpx 12rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
				transition: all 0.3s;
				
				&:active {
					transform: scale(0.98);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				}
				
				.project-image {
					width: 100%;
					height: 530rpx;
					background-color: #f9f9f9;
				}
				
				.project-info {
					padding: 26rpx;
					
					.project-name {
						font-size: 36rpx;
						color: #333;
						font-weight: 600;
						margin-bottom: 12rpx;
						display: block;
					}
					
					.project-desc {
						font-size: 30rpx;
						color: #666;
						margin-bottom: 20rpx;
						display: block;
						line-height: 1.5;
					}
					
					.project-meta {
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.project-price {
							display: flex;
							align-items: baseline;
							
							.symbol {
								font-size: 28rpx;
								color: #FF6B6B;
							}
							
							.number {
								font-size: 40rpx;
								color: #FF6B6B;
								font-weight: 600;
								margin: 0 6rpx;
							}
							
							.unit {
								font-size: 28rpx;
								color: #999;
							}
						}
						
						.project-duration {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							color: #666;
							background-color: #f9f9f9;
							padding: 8rpx 16rpx;
							border-radius: 24rpx;
							
							.icon {
								margin-right: 8rpx;
								font-size: 30rpx;
								color: #2B87FF;
							}
						}
					}
				}
				
				.book-btn {
					margin: 0 26rpx 26rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					background: linear-gradient(135deg, #42A5F5, #1976D2);
					color: #FFFFFF;
					font-size: 32rpx;
					font-weight: 600;
					border-radius: 44rpx;
					box-shadow: 0 6rpx 12rpx rgba(43, 135, 255, 0.2);
					letter-spacing: 2rpx;
					
					&:active {
						opacity: 0.9;
						box-shadow: 0 3rpx 6rpx rgba(43, 135, 255, 0.1);
						transform: translateY(2rpx);
					}
				}
			}
		}
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style> 